<template>
  <!--用户管理-->
  <div class='search'>
    <f-drawer :title='modalTitle' :width='900' ref='roleDrawer' @submit='handleSubmit'>
      <a-tabs @tabClick='handleTabClick' :defaultActiveKey='current' v-model='current' :animated='false'>
        <a-tab-pane tab='角色信息' key='form1'>
          <role-form ref='form1'></role-form>
        </a-tab-pane>
        <a-tab-pane tab='分配权限' key='form2' v-if='isEdit'>
          <role-auth ref='form2'></role-auth>
        </a-tab-pane>
        <a-tab-pane tab='分配用户' key='form3' v-if='isEdit'>
          <role-user ref='form3'></role-user>
        </a-tab-pane>
        <a-tab-pane tab='字段管控' key='form5' v-if='isEdit'>
          <role-field ref='form5' v-if='modalVisible' @handleClose='handleClose'></role-field>
        </a-tab-pane>
        <a-tab-pane tab='商品管控' key='form7' v-if='isEdit'>
          <role-data-scope ref='form7' v-if='modalVisible' @handleClose='handleClose'></role-data-scope>
        </a-tab-pane>
        <a-tab-pane tab='仓库管控' key='form8' v-if='isEdit'>
          <role-data-scope-store ref='form8' v-if='modalVisible' @handleClose='handleClose'></role-data-scope-store>
        </a-tab-pane>
      </a-tabs>
    </f-drawer>
  </div>
</template>
<script>

import RoleForm from "./role_form"
import RoleUser from "./role_user"
import RoleAuth from "./role_auth"
import RoleDataScopeStore from "./role_datascope_store"
import RoleDataScope from "./role_datascope"
import RoleField from "./role_field"

export default {
  name: "roleModal",
  props: {},
  data() {
    return {
      saving: false,
      isEdit: false,
      modalVisible: false,
      title: "",
      current: "form1",
      roleName: "",
      formData: {},
      forms: [
        "form1",
        "form2",
        "form3"
      ]
    }
  },
  methods: {
    handleShow(data) {
      this.isEdit = false
      this.roleName = ""
      if (data && data.roleId) {
        this.isEdit = true
        this.roleName = data.roleName
        this.formData = data
      } else {
        this.formData = {}
      }
      this.modalVisible = true
      this.$refs.roleDrawer.show()
      this.handleTabClick("form1")
    },
    handleSubmit(callback) {
      this.$refs[this.current].handleSubmit(callback)
    },
    handleClose() {
      //this.$refs[this.current].handleReset()
      this.modalVisible = false
    },
    handleTabClick(name) {
      this.current = name
      if (this.current === this.forms[0]) {
        this.title = this.isEdit ? "编辑角色 - " : "添加角色"
      }
      if (this.current === this.forms[1]) {
        this.title = "分配权限"
      }
      if (this.current === this.forms[2]) {
        this.title = "分配用户"
      }
      this.$nextTick(() => {
        this.$refs[this.current].setData(this.formData)
      })
    }
  },
  computed: {
    modalTitle: function() {
      return this.title + this.roleName
    }
  },
  created() {

  },
  beforeDestroy() {
  },
  components: { RoleField, RoleDataScope, RoleDataScopeStore, RoleAuth, RoleUser, RoleForm }
}
</script>

<style scoped lang='less' rel='stylesheet/less'>

</style>
